<template>
  <div class="main-container">
    <Table
      ref="tableRef"
      :choiceColumn="true"
      :defaultSort="defaultSort"
      :columns="columns"
      :apiUrl="apiUrl"
      :permission="permission"
      :formData="formData"
      :showPage="true"
      @openFormBefore="openFormBefore"
    >
      <template #labelVal="{ row }">
        <el-tag>{{ row.labelVal }}</el-tag>
      </template>
    </Table>
  </div>
</template>

<script setup name="ToolLabel">
import Table from "@/components/Table";
import { getLabelList, putLabel, addLabel, delLabel, getLabel } from "@/api/toolLabel";
const { proxy } = getCurrentInstance();

const tableRef = ref();
const defaultSort = ref({prop: 'createTime', order: 'descending'});
const columns = [
  {
    prop: "id",
    label: "编号",
    width: 100,
    align: "center",
  },
  {
    prop: "labelName",
    label: "标签名称",
    align: "center",
  },
  {
    prop: "labelVal",
    label: "别名",
    align: "center",
  },
  {
    prop: "createTime",
    label: "创建时间",
    align: "center",
    sortable:"custom"
  },
];
const menuList = ref([]);
const formData = reactive([
  {
    type: "input",
    label: "标签名称",
    placeholder: "请输入标签名称",
    prop: "labelName",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [
      { required: true, message: "请输入标签名称", trigger: "blur" },
      { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
    ],
  },
  {
    type: "input",
    label: "别名",
    placeholder: "请输入别名",
    prop: "labelVal",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [{ required: true, message: "请输入别名", trigger: "blur" }],
  },
  {
    type: "datetimerange",
    label: "创建时间",
    placeholder: ["筛选创建时间(开始点)", "创建时间(结束点)"],
    prop: "createTime",
    default: [],
    showRule: [],
    searchShow: true,
    width: "70%",
  },
]);

const apiUrl = {
  list: getLabelList,
  edit: putLabel,
  add: addLabel,
  del: delLabel,
  get: getLabel,
};

const permission = {
  add:"admin:tlabel:add",
  edit:"admin:tlabel:edit",
  del:"admin:tlabel:del"
};
const openFormBefore = (val) => {};
</script>

<style scoped lang="scss"></style>
